<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <title>06-axios批量发送请求</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.27.2/axios.min.js"></script>
</head>
<!-- 
  1. axios.all(promiseArr): 用于批量执行多个异步请求 
  2. axios.spread(): 用来指定接收所有成功数据的回调函数的方法

 -->

<body>
  <button id="testBtn">点击获取测试信息</button>

  <script>
    //获取dom节点
    const testBtn = document.getElementById('testBtn');



    // 添加axios全局默认配置
    //axios_0.27.2版本可以将全局默认配置写成对象形式，但是替换掉了axios原本的config，就不能和拦截器一起使用
    /* axios.defaults = {
      baseURL: 'http://localhost:5000',             //配置全局默认请求基础地址
      timeout: 2000,                                //配置全局默认超时时间
      headers: { token: 'er908s0rfsjflxmvnljf' },   //配置全局默认请求头
    }; */
    axios.defaults.baseURL = 'http://localhost:5000';             //配置全局默认请求基础地址

    // 添加请求拦截器
    axios.interceptors.request.use((config) => {
      //对请求进行检查或配置进行特定处理
      if (config.url.match(/test/)) config.timeout = 2000;
      return config;   //必须将请求配置返回，否则就不会发出任何请求
    });

    //添加响应拦截器
    axios.interceptors.response.use(
      (response) => {
        return response.data;  //必须将响应返回，否则axios接受不到response
      },
      (error) => {
        console.log('请求出错了', error);
        return new Promise(() => { });   //终止Promise链，这样后面axios请求使用await就可以不用try...catch处理
      });

    // 批量获取测试信息
    testBtn.onclick = async () => {
      const response = await axios.all([    //底层用的是Promise.all()
        axios.get('/test1'),
        axios.get('/test2?delay=3000'),
        axios.get('/test3'),
      ]);
      console.log(response);
    }


  </script>
</body>

</html>